<script setup lang="ts">
import { getReceive } from '@/services/order'
import type { orderInfo } from '@/types/order'
import { onMounted, provide, ref } from 'vue'
import AddressList from './components/AddressList.vue'

const deliveryArr = ref<orderInfo[]>([])
const getLocation = async () => {
  const { data } = await getReceive()
  deliveryArr.value = data
}
onMounted(() => {
  getLocation()
})
// 每个收货地址右侧的按钮
const icon = ref('edit')
const rightText = ref('管理')
const isClick = ref(false)
const clickRight = () => {
  // 修改右侧文本
  // 修改收货地址的右侧按钮
  if (isClick.value) {
    // 已经改过来，需要改回去
    rightText.value = '管理'
    icon.value = 'edit'
  } else {
    rightText.value = '完成'
    icon.value = 'cross'
  }
  isClick.value = !isClick.value
}
// 图标需要传到孙组件中，使用provide和inject
provide('icon', icon)
// 注入事件，添加保存收货地址之后将关闭弹出层，并且当前组件需要重新获取地址列表
provide('success', getLocation)
</script>

<template>
  <div class="address-page">
    <DP-NavBar
      title="收货地址"
      :rightText="rightText"
      @clickRight="clickRight"
    ></DP-NavBar>
    <div class="address">
      <address-list :address="deliveryArr"></address-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.address-page {
  padding-top: 46px;
}
</style>
